<template>
  <view class="card">
    <!-- 标题区域 -->
    <view class="title" :class="{ 'top-title': isTop }">
      <text class="top-tag" v-if="isTop">置顶</text>
      {{ title }}
    </view>

    <!-- 元数据区域 -->
    <view class="meta">
      <text class="author">{{ author }}</text>
      <text class="comments">{{ comments }} 评</text>
      <text class="time">{{ time }}</text>
    </view>

    <!-- 标签区域 -->
    <view class="tags-container" v-if="tags && tags.length > 0">
      <text class="tag-label">搜索：</text>
      <view class="tag" v-for="(tag, idx) in tags" :key="idx">
        {{ tag }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    isTop: {
      type: Boolean,
      default: false
    },
    author: {
      type: String,
      default: ""
    },
    comments: {
      type: Number,
      default: 0
    },
    time: {
      type: String,
      default: ""
    },
    tags: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style scoped>
.card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx 30rpx;
  margin: 0 30rpx 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.title {
  font-size: 32rpx;
  line-height: 48rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.top-title {
  color: #333;
  font-weight: bold;
}

.top-tag {
  background-color: #e63946;
  color: white;
  font-size: 20rpx;
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
  line-height: 1;
}

.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: #888;
  margin-bottom: 16rpx;
}

.tags-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #f0f0f0;
}

.tag-label {
  font-size: 24rpx;
  color: #666;
}

.tag {
  display: inline-block;
  background-color: #f0f7ff;
  color: #165dff;
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}
</style>